<template>
    <div class="header">
      <!-- 顶部导航栏 -->
      <div class="top-bar">
        <div class="container">
          <div class="location">
            <el-icon><Location /></el-icon>
            <span>北京</span>
          </div>
          <div class="nav-items">
            <template v-if="isUserLogin">
              <span>欢迎，{{ currentUser.username }}</span>
              <el-divider direction="vertical" />
              <span class="nav-item" @click="toUserCenter">我的订单</span>
              <el-divider direction="vertical" />
              <span class="nav-item" @click="toShoppingCart">购物车</span>
              <el-divider direction="vertical" />
              <el-dropdown>
                <span class="nav-item">个人中心<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="editCurrentUser">个人信息</el-dropdown-item>
                    <el-dropdown-item @click="editPassword">修改密码</el-dropdown-item>
                    <el-dropdown-item @click="balanceInfo">余额/充值</el-dropdown-item>
                    <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <router-link to="/login" class="nav-item">你好，请登录</router-link>
              <el-divider direction="vertical" />
              <router-link to="/register" class="nav-item">免费注册</router-link>
            </template>
          </div>
        </div>
      </div>
      
      <!-- 搜索区域 -->
      <div class="search-area">
        <div class="container">
          <div class="logo">
            <img src="@/assets/logo.gif" alt="logo" @click="router.push('/front/index')">
            <div class="logo-text">Aura Gift</div>
          </div>
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="请输入商品名称"
              class="search-input"
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button type="primary" @click="handleSearch">
                  <el-icon><Search /></el-icon>
                  搜索
                </el-button>
              </template>
            </el-input>
            <div class="hot-words">
              <router-link 
                v-for="word in hotWords" 
                :key="word"
                :to="{ path: '/front/product-list', query: { name: word }}"
                class="hot-word"
              >
                {{ word }}
              </router-link>
            </div>
          </div>
          <div class="shopping-cart" @click="toShoppingCart">
            <el-badge :value="cartCount" :max="99" class="cart-badge">
              <el-button class="cart-button">
                <el-icon><ShoppingCart /></el-icon>
                我的购物车
              </el-button>
            </el-badge>
            <!-- 添加 NutUI 动画 & 猜你想买入口 -->
                <div class="nut-container" style="display: inline-block; margin-left: 0px;">
              <nut-animate type="shake" :loop="true">
                <img src="@/assets/Nut.png" alt="Nut" style="width: 150px; height: 150px; object-fit: contain; cursor: pointer;" @click.stop="openGiftWizard" />
              </nut-animate>
            </div>
          </div>
        
        </div>
      </div>

      <!-- 猜你想买问卷弹窗 -->
      <el-dialog v-model="giftDialogVisible" title="猜你想买 · 礼物向导" width="520px" destroy-on-close>
        <div>
          <el-steps :active="step" finish-status="success" simple style="margin-bottom: 16px">
            <el-step title="送给谁" />
            <el-step title="什么场合" />
            <el-step title="爱好/特质" />
            <el-step title="预算" />
          </el-steps>

          <div v-if="step === 0">
            <el-radio-group v-model="form.recipient">
              <el-radio-button label="男朋友" />
              <el-radio-button label="女朋友" />
              <el-radio-button label="父母" />
              <el-radio-button label="朋友" />
              <el-radio-button label="老师" />
            </el-radio-group>
          </div>

          <div v-if="step === 1">
            <el-radio-group v-model="form.occasion">
              <el-radio-button label="生日" />
              <el-radio-button label="情人节" />
              <el-radio-button label="纪念日" />
              <el-radio-button label="毕业" />
            </el-radio-group>
          </div>

          <div v-if="step === 2">
            <el-checkbox-group v-model="form.traits">
              <el-checkbox v-for="opt in traitOptions" :key="opt" :label="opt" />
            </el-checkbox-group>
          </div>

          <div v-if="step === 3">
            <el-radio-group v-model="form.budget">
              <el-radio-button label="100元内" />
              <el-radio-button label="100-300元" />
              <el-radio-button label="300-800元" />
              <el-radio-button label="800元以上" />
            </el-radio-group>
          </div>
        </div>

        <template #footer>
          <div class="dialog-footer" style="display:flex;justify-content:space-between;width:100%">
            <div>
              <el-button @click="prevStep" :disabled="step===0">上一步</el-button>
            </div>
            <div>
              <el-button @click="giftDialogVisible=false">取消</el-button>
              <el-button type="primary" v-if="step<3" @click="nextStep">下一步</el-button>
              <el-button type="primary" v-else @click="submitGiftWizard">完成</el-button>
            </div>
          </div>
        </template>
      </el-dialog>

      <!-- 促销卡片区域 -->
      <div class="promo-cards">
        <div class="container">
          <div class="cards-wrapper">
            <!-- 左侧三个促销卡片 -->
            <div class="promo-card">
              <img src="@/assets/promo1.jpg" alt="促销活动">
              <el-button type="danger" class="discount-btn" round>低至5折</el-button>
            </div>
            
            <div class="promo-card">
              <img src="@/assets/promo2.jpg" alt="促销活动">
              <el-button type="danger" class="discount-btn" round>满199减100</el-button>
            </div>
            
            <div class="promo-card">
              <img src="@/assets/promo3.jpg" alt="促销活动">
              <el-button type="danger" class="discount-btn" round>买2送1</el-button>
            </div>

            <!-- 中间主卡片 -->
            <div class="promo-card main-promo">
              <img src="@/assets/main.png" alt="618促销">
            </div>

            <!-- 右侧三个促销卡片 -->
            <div class="promo-card">
              <img src="@/assets/promo2.jpg" alt="促销活动">
              <el-button type="danger" class="discount-btn" round>直降400</el-button>
            </div>
            
            <div class="promo-card">
              <img src="@/assets/promo3.jpg" alt="促销活动">
              <el-button type="danger" class="discount-btn" round>特价9.9元</el-button>
            </div>
            
            <div class="promo-card">
              <img src="@/assets/promo1.jpg" alt="促销活动">
              <el-button type="danger" class="discount-btn" round>领券减50</el-button>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 主导航菜单 -->
      <div class="main-nav">
        <div class="container">
          <el-menu
            mode="horizontal"
            :default-active="activeIndex"
            class="main-menu"
            @select="handleSelect"
          >
            <el-menu-item index="/front/index">首页</el-menu-item>
            <el-menu-item index="/front/product-list">全部商品</el-menu-item>
            <el-menu-item index="/front/new-products">新品上市</el-menu-item>
            <el-menu-item index="/front/hot-sales">热销商品</el-menu-item>
            <el-menu-item index="/front/promotions">优惠活动</el-menu-item>
          </el-menu>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { Location, Search, ShoppingCart, ArrowDown } from '@element-plus/icons-vue'
  import tools from '@/utils/tools'
  import http from '@/utils/http'
  import router from '@/router/index.js'
  
  const routerHook = useRouter()
  const isUserLogin = computed(() => tools.isLogin())
  const currentUser = computed(() => tools.getCurrentUser())
  const searchKeyword = ref('')
  const activeIndex = ref('/front/index')
  const cartCount = ref(0)
  
  // 模拟热门搜索词
  const hotWords = ['手机', '电脑', '耳机', '平板', '相机']
  
  // 获取购物车数量
  const getCartCount = () => {
    if (isUserLogin.value) {
      http.get('/shoppingCart/page', {
        params: {
          pageNum: 1,
          pageSize: 1000
        }
      }).then(res => {
        cartCount.value = res.data.total || 0
      })
    }
  }
  
  // 页面加载时获取购物车数量，并每30秒刷新一次
  getCartCount()
  setInterval(getCartCount, 30000)
  
  const handleSearch = () => {
    if (!searchKeyword.value.trim()) {
      ElMessage.warning('请输入搜索关键词')
      return
    }
    routerHook.push({
      path: '/front/product-list',
      query: { name: searchKeyword.value.trim() }
    })
  }
  
  const handleSelect = (index) => {
    routerHook.push(index)
  }
  
  const toShoppingCart = () => {
    routerHook.push('/front/shoppingCart')
  }
  
  const toUserCenter = () => {
    routerHook.push('/front/personalCenter')
  }
  
  const editCurrentUser = () => {
    routerHook.push('/front/editCurrentUser')
  }
  
  const editPassword = () => {
    routerHook.push('/front/editPassword')
  }
  
  const balanceInfo = () => {
    routerHook.push('/front/balanceInfo')
  }
  
  const logout = () => {
    tools.logout();
  }

  // 猜你想买弹窗逻辑
  const giftDialogVisible = ref(false)
  const step = ref(0)
  const form = ref({
    recipient: '',
    occasion: '',
    traits: [],
    budget: ''
  })

  const traitMap = {
    '男朋友': ['科技', '运动', '游戏', '户外', '实用'],
    '女朋友': ['文艺', '美妆', '手作', '治愈', '轻奢'],
    '父母': ['健康', '保健', '养生', '家居', '实用'],
    '朋友': ['创意', '潮流', '美食', '数码', '桌游'],
    '老师': ['文具', '茶具', '书籍', '工艺', '实用']
  }

  const traitOptions = computed(() => {
    return traitMap[form.value.recipient] || ['科技', '文艺', '运动', '创意', '实用']
  })

  const openGiftWizard = () => {
    giftDialogVisible.value = true
    step.value = 0
    form.value = { recipient: '', occasion: '', traits: [], budget: '' }
  }

  const nextStep = () => {
    if (step.value === 0 && !form.value.recipient) return ElMessage.warning('请选择送给谁')
    if (step.value === 1 && !form.value.occasion) return ElMessage.warning('请选择送礼场合')
    if (step.value === 2 && (!form.value.traits || form.value.traits.length === 0)) return ElMessage.warning('请选择至少一个爱好/特质')
    step.value = Math.min(3, step.value + 1)
  }

  const prevStep = () => {
    step.value = Math.max(0, step.value - 1)
  }

  const submitGiftWizard = () => {
    if (!form.value.budget) return ElMessage.warning('请选择预算范围')
    giftDialogVisible.value = false
    // 跳转到结果页，并携带查询参数（加时间戳，确保同一路由也会刷新）
    routerHook.push({
      path: '/front/gift-recommend',
      query: {
        recipient: form.value.recipient,
        occasion: form.value.occasion,
        traits: form.value.traits.join(','),
        budget: form.value.budget,
        _ts: Date.now()
      }
    })
  }
  </script>
  
  <style scoped>
  .header {
    position: relative;
    z-index: 1;
    background-color: transparent;
  }
  
  .top-bar {
    background-color: rgba(0, 0, 0, 0.1);
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
  }
  
  .container {
    width: 1190px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .location {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  
  .nav-items {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .nav-item {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
  }
  
  .nav-item:hover {
    color: #fff;
    text-decoration: underline;
  }
  
  .search-area {
    background-color: transparent;
    padding: 20px 0;
  }
  
  .logo {
    width: 360px;
    height: 150px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .logo img {
    height: 100%;
    object-fit: contain;
  }

  .logo-text {
    font-size: 38px;
    font-weight: bold;
    background: linear-gradient(120deg, #d1c221, #5e24a5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }
  
  .search-box {
    flex: 1;
    margin: 0 100px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .search-input :deep(.el-input-group__append) {
    background-color: #9597C3;
    border-color: #9597C3;
    color: #fff;
  }
  
  .hot-words {
    margin-top: 8px;
    display: flex;
    gap: 12px;
  }
  
  .hot-word {
    color: #999;
    font-size: 12px;
    text-decoration: none;
  }
  
  .hot-word:hover {
    color: #e1251b;
  }
  
  .shopping-cart {
    width: 190px;
  }
  
  .cart-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #f7f7f7;
    border-color: #eee;
  }
  
  .cart-button:hover {
    background-color: #f0f0f0;
  }
  
  .main-nav {
    border-bottom: none;
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .main-menu {
    background-color: transparent;
  }
  
  :deep(.el-menu--horizontal) {
    border-bottom: none;
  }
  
  :deep(.el-menu-item) {
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
  }
  
  :deep(.el-menu-item.is-active) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
  
  :deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, 
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }

  .promo-cards {
    margin: -10px 0 10px;
    background-color: transparent;
  }

  .cards-wrapper {
    display: flex;
    gap: 15px;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .promo-card {
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
    padding: 0;
  }

  .promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .main-promo {
    width: 385px;
    height: 120px;
    overflow: hidden;
    padding: 0;
  }

  .main-promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .discount-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    height: 24px;
    padding: 0 12px;
    white-space: nowrap;
    --el-button-bg-color: #e1251b !important;
    --el-button-border-color: #e1251b !important;
    --el-button-hover-bg-color: #f12828 !important;
    --el-button-hover-border-color: #f12828 !important;
  }

  .promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  </style> 